<script setup>
/**
 * & 文件引入区域
 */
import { onMounted, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";

import { itemStore } from "@/stores/item";
import { useUseStore } from "@/stores/user";

import { langList } from "@/data/langList";
import { countryList } from "@/data/countryList";

import { OpenChildrenPage } from "@/hook/routerHandle";
import { ToastFun } from "@/hook/toast";

import {
    getCountryList,
    getThirdDistrictList,
    getSecondDistrictList,
    getFourthDistrictList,
} from "@/server/api/BuyerData";

/**
 * & 注册区
 */

const { t } = useI18n();
const props = defineProps(["type", "isScaner", "regionChange"]);
const emit = defineEmits([
    "itemDataChangeFun",
    "shopDataChangeFun",
    "sendRegionId"
]);

/**
 * & 变量声明区
 */
const { locale } = useI18n();
let changeView = reactive({
    isLang: false, // 控制语言设置面板的显示隐藏
    isCountry: false, // 控制国家设置面板的显示隐藏
    isProvince: false, // 控制省份设置面板的显示隐藏
    isCity: false, // 控制城市设置面板的显示隐藏
    isRegion: false, // 控制区县设置面板的显示隐藏
});

let showBottom = ref(false); // 控制弹出层样式

let secDisList = ref(); // 二级行政区数据列表
let thdDisList = ref(); // 三级行政区数据列表
let fthDisList = ref(); // 四级行政区数据列表


let langCon = ref(null); // 控制选中的语言样式
let countryCon = ref(null); // 控制选中的国家样式
let provinceCon = ref(null); // 控制选中的省份样式
let cityCon = ref(null); // 控制选中的城市样式
let regionCon = ref(null); // 控制选中的区县样式

let countryImg = ref(""); // 显示的国旗

/**
 * & 函数区
 */
// 切换设置面板方法
const changeViewFun = (type) => {
    // 显示弹出层
    showBottom.value = true;

    // 通过遍历将所有的面板隐藏后，再将传入的type对应的面板显示
    for (const key in changeView) changeView[key] = false;
    changeView[type] = true;
};

// 修改国家地区分类
const changeItemAddFun = (id, img) => {
    // 修改国家地区代码
    // useUseStore().countryCode = id;

    // 切换国旗
    countryImg.value = img;

    // 判断是否在shop页面，从而请求二级三级行政区
    if (true) {
        // 获取对应的二级行政区数据
        getSecDisListFun(id);

        regionCon.value = null;
    }

    // 避免重复点击发起请求
    if (countryCon.value != id) {
        countryCon.value = id;
        ToastFun("Loading", { msg: "✋🏻..." });
        emit("itemDataChangeFun", id);

        // 弹出层隐藏
        showBottom.value = false;
    }
};

// 获取二级行政区域列表
const getSecDisListFun = async (id) => {
    ToastFun("Loading", { msg: "✋🏻..." });

    let { data } = await getSecondDistrictList(id);

    if (data.code == 200) {
        secDisList.value = data.data;
        console.log("获取二级行政区域列表", secDisList.value);

        // 显示省份设置面板
        changeViewFun("isProvince");
    } else {
        ToastFun("show", { msg: t("tellUs") });
        showBottom.value = false;
    }
};

// 获取三级行政区域列表
const getThdDisListFun = async (id) => {
    provinceCon.value = id;
    console.log("区号1:", id);
    emit('sendRegionId', id);
    ToastFun("Loading", { msg: "✋🏻..." });

    let { data } = await getThirdDistrictList(id); // 请求接口

    if (data.code == 200) {
        // 显示省份设置面板
        changeViewFun("isCity");
        thdDisList.value = data.data;
        console.log("获取三级行政区域列表", thdDisList.value);
    } else {
        ToastFun("", { msg: t("tellUs") })
        showBottom.value = false;
    }
};

// 获取四级行政区域列表
const getFthDisListFun = async (id) => {
    cityCon.value = id;
    ToastFun("Loading", { msg: "✋🏻..." });
    let { data } = await getFourthDistrictList(id); // 请求接口

    if (data.code == 200) {
        // 显示省份设置面板
        changeViewFun("isRegion");
        fthDisList.value = data.data;
        console.log("获取四级行政区域列表", fthDisList.value);
    } else {
        ToastFun("", { msg: t("tellUs") })
        showBottom.value = false;
    }
};

// 修改实体店地区方法
const changeShopAddFun = (id) => {
    console.log(countryCon.value, id);
    console.log("区号：", id);
    emit('sendRegionId', id)
    if (countryCon.value == "CN" && regionCon.value == null) {
        regionCon.value = id;
        getFthDisListFun(id);
    }
    // 避免重复发起请求
    else {
        cityCon.value = id;
        useUseStore().regionId = id;
        emit("shopDataChangeFun", id);
        showBottom.value = false;
    }
};

onMounted(() => {
    countryCon.value = useUseStore().countryCode;
    // console.log("国家代码", useUseStore().countryCode);

    countryList.findIndex((item) => {
        if (useUseStore().countryCode == item.countryCode)
            countryImg.value = item.img;
    });

    // 获取默认语言下标
    let index = itemStore().langIndex;

    // 判断是否有选中语言的下标记录
    if (index == null) {
        index = langList.value.findIndex((item) => item.lang == locale.value);
    }

    langCon.value = index;
});
</script>

<template>
    <!-- 
    @searchFun：用于获取搜索框的内容
    isScaner: 是否显示扫描二维码
    type：样式类型
   -->
    <div class="topBarCom">
        <div class="topBar">
            <img :src="`/images/countryImg/${countryImg ? countryImg : 'China.png'}`" @click="changeViewFun('isCountry')"
                class="country" />
            <img src="/images/Home/路径.png" alt="">
        </div>

        <!-- 语言和国家设置面板 -->
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '92%' }" class="popup">
            <!-- 关闭弹窗按钮 -->
            <div class="btn">
                <img @click="showBottom = false" src="/images/Home/语言切换面板按钮.png" alt="" />
            </div>
            <div class="setUpView country" v-if="changeView.isCountry">
                <!-- <div class="select">
                        <span>智能识别国家</span>
                        <span class="selected">加拿大</span>
                </div> -->
                <div class="content">
                    <div :class="['item', countryCon == item.countryCode ? 'con' : '']"
                        @click="changeItemAddFun(item.countryCode, item.img)" v-for="(item, i) in countryList" :key="i">
                        <span>{{ item.countryEName }}</span>
                        <img :src="`/images/countryImg/${item.img}`" alt="" />
                    </div>
                </div>
            </div>

            <div class="setUpView province" v-if="changeView.isProvince">
                <div class="content">
                    <div :class="['item', provinceCon == item.countryId ? 'con' : '']"
                        @click="getThdDisListFun(item.countryId)" v-for="(item, i) in secDisList" :key="i">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>

            <div class="setUpView city" v-if="changeView.isCity">
                <div class="content">
                    <div :class="['item', cityCon == item.countryId ? 'con' : '']" @click="changeShopAddFun(item.countryId)"
                        v-for="(item, i) in thdDisList" :key="i">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>

            <div class="setUpView region" v-if="changeView.isRegion">
                <div class="content">
                    <div :class="['item', cityCon == item.countryId ? 'con' : '']" @click="changeShopAddFun(item.countryId)"
                        v-for="(item, i) in fthDisList" :key="i">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<style lang="scss" scoped>
.topBarCom {

    .topBar {
        padding: 20rem 16rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >.country {
            width: 34rem;
            margin-right: 10rem;
        }
    }

    :deep(.popup) {

        border-radius: 12rem 12rem 0rem 0rem;
        overflow-y: scroll;
        background: #f5f5f5;

        &::-webkit-scrollbar {
            display: none;
        }

        .btn {
            display: flex;
            justify-content: center;
            padding: 16rem 0 28rem;
            background: #f5f5f5;

            position: sticky;
            top: 0;
            z-index: 10;

            >img {
                width: 37rem;
                height: 8rem;
            }
        }

        .setUpView {
            z-index: 10;
            width: 100%;

            .select {
                padding: 12rem 0 12rem 12rem;
                background: #fff;

                display: flex;
                align-items: center;

                span {
                    font-size: 14rem;
                    line-height: 20rem;
                    font-weight: 500;

                    &.selected {
                        font-size: 12rem;
                        font-weight: 400;
                        line-height: 16rem;
                        margin-left: 12rem;
                    }
                }
            }

            .content {
                font-size: 14rem;

                >.item {
                    padding: 12rem;
                    background: #fff;

                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    >img {
                        width: 35rem;
                    }

                    &.con {
                        background: #fbfbfb;
                        font-weight: 700;
                    }
                }
            }
        }
    }
}
</style>
